<template>

    <el-main>
        <el-col>
            <div style="float:left" class="head">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item>
                        <el-select size="medium" v-model="operateType" placeholder="批量操作">
                            <el-option style="width:120px;" v-for="item in operateOptions" :key="item" :value="item"
                                :label="item">
                            </el-option>
                        </el-select>
                        <el-form-item>
                            <el-input placeholder="请输入名称" v-model="select" style="width:150px"></el-input>
                        </el-form-item>
                        <el-button type="primary" style="margin-right:30px;" icon="el-icon-search"
                            @click="SelectName()">搜索</el-button>
                        <el-button type="primary" style="margin-right:30px; width:100px;" icon="el-icon-search"
                            @click="BatchDelete()">批量删除</el-button>
                        <router-link to="/home/store/addCommodity">
                            <el-button type="primary" icon="el-icon-search">
                                添加
                            </el-button>
                        </router-link>
                    </el-form-item>
                </el-form>
            </div>
            <div style="float:left">
                <el-dropdown trigger="click">
                    <el-avatar class="el-avatar--icon" :src="this.$store.state.user.headPicture"></el-avatar>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-plus" @click.native="dropLogin('a')">退出登录</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-share" @click.native="$refs.file.click()" type="primary">
                            更换头像
                        </el-dropdown-item>
                        <input type="file" id="el1" ref="file" @change="onFileChange" style="display: none" />
                        <!-- <el-dialog a -->
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-col>
        <el-table :data="arr.slice((currentPage - 1) * pageSize, currentPage * pageSize)" @row-click="Getlist"
            @selection-change="handleSelectionChange" style="width: 100% ;font-size:15px">
            <el-table-column type="selection" width="80px" :indeterminate="true" fixed="left">
            </el-table-column>
            <el-table-column prop="id" label="商品id">
            </el-table-column>
            <el-table-column prop="goodsType" label="分类">
            </el-table-column>
            <el-table-column prop="storeName" label="店名">
            </el-table-column>
            <el-table-column prop="buyerId" label="购买者id">
            </el-table-column>
            <el-table-column prop="goodsName" show-overflow-tooltip label="商品名称">
            </el-table-column>
            <el-table-column prop="payStatus" label="状况">
            </el-table-column>
            <el-table-column prop="price" label="价格">
            </el-table-column>
            <el-table-column label="操作" width="250px">
                <template slot-scope="scope">
                    <router-link to="/home/UPGoods">
                        <el-button size="mini"
                            @click.native.stop="edition(scope.row.storeName, scope.row.hostKeys, scope.row.id)">
                            编辑
                        </el-button>
                    </router-link>
                    <el-button size="mini" type="danger"
                        @click.native.stop="DeleteGoodsSubmit(scope.row)">删除</el-button>

                </template>

            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination :current-page.sync="currentPage" @current-change="handleCurrentChange" :page-size="pageSize"
                layout="prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </el-main>


</template>

<script>
import { batchDelete, getList, getHostKey, deleteGoodsSubmit } from '@/api/admin/Goods'

import axios from 'axios';
export default {
    data() {
        return {
            checked: null, // 如果使用单选框,定义一个model值
            currentSelectItem: {},// 当前选中的值
            pageSize: 10,
            operateOptions: [],
            currentPage: 0,
            total: 0,

            operateType: '',
            select: ' ',
            pagerCount: 0,
            id: this.$store.state.realGoods.id,
            multipleSelection: [],
            tableData: [],
            arr: []
        }
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;

        },

        a() {
            getList().then(res => {
                this.tableData = res.data
                this.arr = this.tableData
                const size = this.arr.length
                this.total = size
                this.pagerCount = size / this.pageSize
            })

            //获取热键
            getHostKey().then(res => {
                this.operateOptions = res.data
            })
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        }, UpDataUser(row, column, event) {
            // 在这里调用你的方法
            this.$router.replace({ path: '/home/UPGoods' })
            let target = this.$store.state.Goods.tableData.filter(res => {
                return res.id == row.id
            });
            console.log(target);
            this.$store.state.Goods.name = target[0].name
            this.$store.state.Goods.date = target[0].date
            this.$store.state.Goods.address = target[0].address
        }, visible_change() {
            const visiblechange = document.querySelector('el-dropdown')

        }, DropLogin(a) {
            this.$router.replace({ path: '/' })
        },

        SelectName() {
            if (this.operateType == ('' || '全部')) {
                this.arr = this.tableData
            }
            else {
                if (this.select == '') {
                    this.arr = this.tableData
                    this.arr = this.arr.filter(res => {
                        return res.goodsType == this.operateType
                    })
                } else {
                    this.arr = this.tableData
                    this.arr = this.arr.filter(res => {
                        return res.goodsType == this.operateType
                    })
                    // this.arr = this.arr.filter(res => {
                    //     return res.goodsName.includes(this.select)
                    // })
                }
            }
        },
        ModifyStatus(id1, status1) {
            console.log('fdfadsfads' + id1)
            console.log('fdafadfdaf' + status1)
            axios({
                methods: 'PUT',
                url: 'http://localhost:8090/RealGoods/ModifyUserStatus',
                params: {
                    id: id1,
                    status: status1
                }
            }).then((res) => {
                this.$message({
                    type: 'success',
                    message: '修改完成!'
                });
                this.a()
            });
        }, DeleteGoodsSubmit(el) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                deleteGoodsSubmit(el).then((res) => {
                    if (res.msg == null) {
                        this.a()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    } else {
                        this.$message({
                            type: 'error',
                            message: '删除失败!'
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        }, onFileChange(e) {
            const file = e.target.files[0];
            if (!file) {
                return;
            }
            const reader = new FileReader();
            reader.onload = (e) => {
                this.$store.state.user.headPicture = e.target.result;
            };
            reader.readAsDataURL(file);
            // 如果需要上传到服务器，可以在reader.onload之后添加上传代码
        },


        BatchDelete() {
            // console.log(this.multipleSelection.id);
            console.log(this.multipleSelection);
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                var array = []
                for (let i of this.multipleSelection) {
                    array.push(i.storeName + '_' + i.goodsType + '_' + i.id)
                }
                batchDelete(array).then((res) => {
                    if (res.data.msg == null) {
                        this.a()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.data.msg
                        });
                        this.a()
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            })
        }
    },
    mounted() {
        this.a()
    }
}


</script>
<style lang="less" scoped>
.el-container {
    margin-left: 100px;
}

.el-dropdown {
    margin-left: 300px;

}

.el-main {
    margin-left: 50px;
}

.block {
    margin-left: 360px;
}
</style>
